<template>
  <div class="comment-input">
    <h3>
      LET A REPLAY
    </h3>
    <el-row :gutter="20">
      <el-col :span="12" :xs="24">
        <div class="reply-name reply-item">
          <label for="reply-name">name</label>
          <input type="text" id="reply-name">
        </div>
      </el-col>
      <el-col :span="12" :xs="24">
        <div class="reply-email reply-item">
          <label for="reply-email">name</label>
          <input type="text" id="reply-email">
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="reply-subject reply-item">
          <label for="reply-subject">name</label>
          <input type="text" id="reply-subject">
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="reply-comment reply-item">
          <label for="reply-comment">name</label>
          <textarea name="" id="reply-comment" ></textarea>
        </div>
      </el-col>
    </el-row>
    <button class="reply-button">reply</button>
  </div>
</template>

<script>
export default {
  name: 'comment-input'
}
</script>

<style scoped lang="less">
.comment-input{
  border-top: 1px solid #e1e1e1;
  padding: 30px;
h3{
  letter-spacing: 3px;
  margin-bottom: 50px;
}
  .reply-item{
    margin: 2% 0;
    border-bottom: 1px solid #e1e1e1;
    position: relative;
    min-height: 50px;
    label{
      position: absolute;
      top: 0;
      left: 0;
      font-size: 14px;
      letter-spacing: 2px;
    }
    input,textarea{
      margin-top: 18px;
      padding-left: 10px;
      border: none;
      width: 100%;
      min-height: 36px;
      outline: none;
    }
    textarea{
      height: 100px;
      margin-top: 20px;
    }
  }
  .reply-button{
    position: relative;
    z-index: 1;
    padding: 0 30px;
    min-width: 175px;
    height: 60px;
    border: 1px solid;
    border-color: #dcdcdc;
    font-size: 14px;
    border-radius: 0;
    line-height: 59px;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: "Open Sans", sans-serif;
    box-shadow: 0 0 30px rgba(0, 0, 0, 0.1);
    color: #000000;
    background: #ffffff;
  }
  .reply-button:hover {
    background-color: #30336b;
    color: #ffffff;
    border-color: #30336b;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
  }
}
</style>
